import { FC, useEffect, useRef, useState } from 'react';

import { useMemoizedFn } from 'ahooks';
import { Button } from 'antd-mobile'
import { connectWebSocket, textToSpeech } from './AudioPlayer';

/**
 * audio/video 常用方法属性
 *  volume: 非只读，获取或者修改当前音频对象的音量值，它的值的范围在0–1之间。
 *  autoplay: 非只读，修改或返回当前标签的是否自动播放的属性值。值为true/false
 *  paused: 判断当前音频是否暂停
 *  currentTime: 获取当前音频的播放进度，以秒为单位，小数点后保留六位小数，是制作自己的播放器的进度条的重要组成部分。
 *  duration: 返回当前音频的总长度。以秒为单位。
 *  ended: 判断当前的音频是否播放完成。值为true/false
 *  loop: 非只读，修改或返回当前音频是否要在结束的时候从头开始播放，值为true/false
 *  currentSrc: 返回当前音频的资源地址，是只读的
 *  muted: 非只读修改或返回当前音频是否静音，值为true/false
 *  controls: 非只读，判断或修改是否使用浏览器原生控件，值为true/fals
 *
 */


const AudioPlayer = (props, {
    handleCanplay: handleAudioCanPlayer,
    handleDurationchange: handleAudioDurationchange,
    handleTimeUpdate: handleTimeUpdateChange,
    handleEnd: handleAudioEnd,
}) => {
    const [audioList, setAudioList] = useState(0);
    useEffect(() => {
        console.log(props.onClick);
        setAudioList(props.origin)
        console.log('audioList', audioList);
    }, [props.origin])
    const audioPlayer = useRef();

    const handlePlayAudio = useMemoizedFn(() => {
        connectWebSocket('', (url) => {
            audioPlayer.current.src = url;
        });
    });

    const handleTextToSpeech = useMemoizedFn(() => {
        props.onClick();
        sessionStorage.removeItem('driverNum')
        textToSpeech(`全程大约${(props.origin > 1000 ? (props.origin / 1000).toFixed(1) + '公里' : props.origin + '米')}，请注意乘车安全，祝您路途愉快`, (url) => {
            audioPlayer.current.src = url;
            // audioPlayer.current.play();
        });
    });

    // 音/视频加载完成准备播放
    const handleCanplay = useMemoizedFn(() => {
        handleAudioCanPlayer?.(audioPlayer.current);
    });

    // 音/视频播放时长发生变化
    const handleDurationchange = useMemoizedFn((durationTime) => {
        handleAudioDurationchange?.(audioPlayer.current, durationTime);
    });

    // 音/视频播放中触发
    const handleTimeUpdate = useMemoizedFn((time) => {
        handleTimeUpdateChange?.(audioPlayer.current, time);
    });

    // 音/视频播放结束
    const handleEnd = useMemoizedFn((time) => {
        handleAudioEnd?.(audioPlayer.current, time);
    });
    return (
        <>
            <audio
                src=""
                
                // muted
                preload="auto"
                id="audioId"
                ref={audioPlayer}
                onCanPlay={handleCanplay}
                onDurationChange={handleDurationchange}
                onTimeUpdate={handleTimeUpdate}
                onEnded={handleEnd}
            >
                浏览器不支持音频播放。
            </audio>

            {/* @ts-ignore */}
            <Button
            className='audio-btn-play-start'
            onClick={handleTextToSpeech}>
                立即打车
            </Button>
        </>
    );
};

export default AudioPlayer;